<template>
	<div id="container">
		<div id="search_content">
			<el-form ref="search_form"
					label-width="120px">
				    <el-form-item label="考生姓名:">
				    	<el-input v-model="stu.stuRealName">
				    		<template #prepend>
				    			<i class="el-icon-user" style="font-size: 20px;"></i>
				    		</template>
				    	</el-input>
				    </el-form-item>
				    <el-form-item label="考生账号:">
				    	<el-input v-model="stu.stuId">
				    		<template #prepend>
				    			<i class="el-icon-notebook-2" style="font-size: 20px;"></i>
				    		</template>
				    	</el-input>
				    </el-form-item>
				    <el-form-item label="考生分数">
				    	<el-input v-model="stu.stuScore">
				    		<template #prepend>
				    			<i class="el-icon-s-order" style="font-size: 20px;"></i>
				    		</template>
				    	</el-input>
				    </el-form-item>
					<el-form-item label="省内排名">
						<el-input v-model="stu.stuRank">
							<template #prepend>
								<i class="el-icon-s-data" style="font-size: 20px;"></i>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="咨询师账号">
						<el-input v-model="stu.consultId">
							<template #prepend>
								<i class="el-icon-connection" style="font-size: 20px;"></i>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" v-on:click="search()">
							查询
						</el-button>
						<el-button type="danger" @click="deleteAll" :disabled="this.multipleSelection.length==0">批量删除</el-button>
					</el-form-item>
			</el-form>
		</div>
		
		<div id="show_content">
			
			<div id="show_table">
				<el-table
				:data="students"
				border
				style="width: 100%"
				@selection-change="handleSelectionChange"
				:header-cell-style="{textAlign: 'center'}"
				:cell-style="{ textAlign: 'center' }">
					<el-table-column 
						type="selection"></el-table-column>
					<el-table-column 
						label="考生账号" 
						prop="stuId"></el-table-column>
					<el-table-column
						label="考生姓名"
						prop="stuRealName"></el-table-column>
					<el-table-column
						label="考生分数"
						prop="stuScore"></el-table-column>
					<el-table-column
						label="省内排名"
						prop="stuRank"></el-table-column>
					<el-table-column
						label="咨询师账号"
						prop="consultId"></el-table-column>
					<el-table-column
						label="操作">
						<template #default="scope">
							<el-button type="primary" class="el-icon-delete" @click="del(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div id="page_content">
				<el-pagination 
				background layout="prev,pager,next" 
				:total="pageTotle" 
				:page-size="pageSize"
				@current-change="pageData">
				</el-pagination>
			</div>
		</div>
	</div>
	
</template>

<script>
	export default{
		name:'stuAdmin',
		data(){
			return{
				stu:{
					stuRealName:'',
					stuId:'',
					stuScore:'',
					stuRank:'',
					consultId:''
				},
				multipleSelection:[],
				students:[],
				pageNum:1,
				pageTotle:0,
				pageSize:4,
				//search:''//查询输入框内容
			}
		},
		// computed:{
		// 	//模糊查询
		// 	tables(){   //数据表格中定义tables
		// 		const search=this.search
		// 		if (search){
		// 			//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
		// 			return this.students.filter(data=>{
		// 				// some() 方法用于检测数组中的元素是否满足指定条件;
		// 				// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
		// 				// 如果没有满足条件的元素，则返回false。
		// 				return Object.keys(data).some(key=>{
		// 					// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
		// 					// 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
		// 					return String(data[key]).toLowerCase().indexOf(search)>-1
		// 				})
		// 			})
		// 		}
		// 		return this.students
		// 	}
		// },
		methods:{
			init() {
				this.stu.pageNum = this.pageNum;
				this.stu.pageSize = this.pageSize;
				var param = this.$qs.stringify(this.stu);
				this.$axios
					.post("stu/findByParam", param)
					.then(rst => {
						console.log(rst);
						this.students = rst.data.list;
						this.pageTotle = rst.data.total;
					}).catch(ex => {
						console.log(ex);
					});
			},
			search(){
				this.pageNum = 1;
				this.init();
			},
			del(row){
			   this.$confirm('此操作将永久删除, 是否继续?', '提示', {
			   	confirmButtonText: '确定',
			   	cancelButtonText: '取消',
			   	type: 'warning'
			   }).then(()=>{
			   	let param={
			   		stuId : row.stuId
			   	}
			   	let data = this.$qs.stringify(param);
			   	console.log(data);
			   	this.$axios
			   	.post("stu/delete",data)
			   	.then(rst=>{
			   		if(rst){
			   			this.init();
			   		}
			   	})
			   }).catch(()=>{
			   	this.$message({
			   		type:'info',
			   		message:'已取消删除'
			   	});
			   });
			},
			handleSelectionChange(val){
				this.multipleSelection=val;
				console.log(this.multipleSelection)
			},
			deleteAll(){
				if(this.multipleSelection.length==0)
					this.$message.error('请至少选择一项')
				this.multipleSelection.forEach(element=>{
					this.students.forEach((e,i)=>{
							this.students.splice(i,1)
					});
				});
			},
			pageData(curr){
				this.pageNum=curr;
				this.init();
			}
			
		}
	}
</script>

<style>
</style>
